import react from "react"
function stateHooks() {
    // 使用react.useState初始化一个值，这个方法会返回一个数组，数组第一位是要定义的值，第二个是修改这个值得函数
    const [count, setCount] = react.useState(0)
    const [name, setName] = react.useState('Tome')
    const [obj, setObj] = react.useState({
        name: '李四',
        age: 18
    })

    function changeUser() {
        setObj(preObj => {
            console.log(preObj);
            // 返回一个新的对象实现修改原本的对象
            return { ...preObj, ...{ age: 20 } }
        })
    }

    // 点击加1按钮调用setCount方法，传入一个新的值来修改初始化的值
    // 在第一次useState后回缓存count，点击修改会重新调用当前的函数，但是不会更改count的值
    function add() {
        // 修改函数的两种写法之一
        setCount(count + 1)
    }
    function changeName() {
        /**
         * 修改函数的两种写法之二
         * 传入一个函数，这个函数会接受到之前的值，然后返回新的值覆盖之前的值
         */
        setName(preName => preName = 'Juar')
    }
    return (
        <div>
            <h2>当前的数据和为：{count}</h2>
            <h3>我的名字是：{name}</h3>
            <button onClick={add}>点我+1</button>
            <button onClick={changeName}>修改名字</button>
            <h4>{obj.name} - {obj.age}</h4>
            <button onClick={changeUser}>修改obj</button>
        </div>
    )
}

export default stateHooks